<template>
  <div class="counter-warp">
    <div class="tab-wrapper">
      <van-tabs
        animated
        :active="active"
        @change="onChange"
        swipeable
      >
        <van-tab
          v-for="(item,index) in langList"
          :key="index"
          :title="item"
        >
          <div class="content">
            <ul
              v-for="(item,idx) in musicList"
              :key="idx"
            >
              <li
                :data-musicurl="item.song_url"
                class="song"
                @tap="getUrl(item)"
              > <span class="iconfont icon-erji1 erji">
                </span>
                <span class="avator">
                  <span class="title">{{item.name}} </span>
                  <img :src="item.img_url"></img>
                </span>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div
      v-show="playerFlag"
      class="player-show"
    >
      <Player
        @playerFlag="fromChild"
        v-bind:songDetail="songDetail"
      />
    </div>
  </div>
  <!-- <p>Vuex counter：{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="test">获取</button>
    </p> -->

  <!-- </div> -->
</template>

<script>
// Use Vuex
import store from "../../utils/store";
import Player from "@/components/Player";

export default {
  onShareAppMessage(options) {
    return {
      title: "مارس ناخشا كۇلۇبى",
      path: `/pages/index/main`,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      playerFlag: false,
      active: 0,
      tempList: [],
      musicList: {},
      songDetail: {},
      langList: [
        "ئۇيغۇرچە",
        "خەنزۇچە",
        "ياۋرو-ئامېرىكا",
        "مۇزىكا",
        "ئاۋازلىق ئەسەر",
        "باشقىلار"
      ]
    };
  },
  computed: {},
  methods: {
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    },
    onChange(event) {
      // console.log(event.mp.detail.index);
      let idx = event.mp.detail.index;
      this.active = idx;
      this.getNewMusicList(idx);
    },
    getNewMusicList(index) {
      let tempList = [];
      switch (index) {
        case 0:
          tempList = this.sortMusicList(this.tempList.list0);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        case 1:
          tempList = this.sortMusicList(this.tempList.list1);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        case 2:
          tempList = this.sortMusicList(this.tempList.list2);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        case 3:
          tempList = this.sortMusicList(this.tempList.list3);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        case 4:
          tempList = this.sortMusicList(this.tempList.list4);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        case 5:
          tempList = this.sortMusicList(this.tempList.list5);
          this.musicList = tempList;
          store.commit("musicList", tempList);
          break;
        default:
          break;
      }
    },
    sortMusicList(obj) {
      // console.log(obj[0].xuhao);
      for (let i = 0; i < obj.length; i++) {
        obj[i].xuhao = i;
      }
      return obj;
    },
    getUrl(song) {
      store.commit("playMusic", song);
      this.songDetail = song;
      this.playerFlag = true;
      this.$http
        .get(`https://wx.15v3a.cn/weapp/musicCounter?id=${song.id}`)
        .then(res => {
          // console.log(res);
        });
      // this.$http.post(name)
    },
    fromChild(data) {
      this.playerFlag = data;
    }
  },
  onLoad() {
    let arr = [1, 2, 3, 4];
    this.$http
      .get("https://wx.15v3a.cn/weapp/musicList?type=sort")
      .then(res => {
        let list = res.list,
          len = list.length;
        for (let i = 0; i < len; i++) {
          list[i].xuhao = i;
        }
        var tempList = {
          list0: [],
          list1: [],
          list2: [],
          list3: [],
          list4: [],
          list5: []
        };
        for (let i = 0; i < len; i++) {
          if (list[i].type == "uy") {
            tempList.list0.push(list[i]);
          } else if (list[i].type == "zn") {
            tempList.list1.push(list[i]);
          } else if (list[i].type == "er-am") {
            tempList.list2.push(list[i]);
          } else if (list[i].type == "cs") {
            tempList.list3.push(list[i]);
          } else if (list[i].type == "ys") {
            tempList.list4.push(list[i]);
          }
          if (list[i].type == "other") {
            tempList.list5.push(list[i]);
          }
        }
        let musicList = tempList.list0;
        for (let i = 0; i < musicList.length; i++) {
          musicList[i].xuhao = i;
        }
        tempList.list0 = musicList;
        this.tempList = tempList;
        this.musicList = musicList;
        store.commit("musicList", musicList);
      });
  },
  components: {
    Player
  },
  onHide() {
    let list = this.tempList.list0;
    for (let i = 0; i < list.length; i++) {
      list[i].xuhao = i;
    }
    this.musicList = list;
  }
};
</script>

<style lang="scss" scoped>
@import url("../../../lib/style/iconfont.css");

.counter-warp {
  text-align: center;
  /* margin-top: 100px; */
  .tab-wrapper {
    // position: fixed;
    // top: 0;
    .content {
      margin: 10rpx auto;
      width: 98%;
      // border: 2rpx saddlebrown solid;
      .song {
        margin-top: 20rpx;
        width: 100%;
        height: 60rpx;
        // border: 1px solid slateblue;
        .erji {
          float: left;
          font-size: 40rpx;
          line-height: 60rpx;
          color: #999999;
          margin-left: 20rpx;
        }
        .avator {
          float: right;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          .title {
            font-size: 30rpx;
            color: #929292;
            margin-right: 20rpx;
          }
        }
      }
    }
  }
}
</style>
